<div class='vsep'>1</div>
<div class="column">
	<h2>Selecciona uno o varios contactos.</h2>
	<p>Tu nube de amigos.</p><span class="small">Fotos, videos o audios.</span> </p>

	<div class="step">
		<div id="nube">
			<%unless @result.nil?%>
				<%=render(:partial => "friend", :collection => @result["consumo"],:locals => {:display =>NubeamigosHelper::DISPLAY_NAME, :totalDuracion => @result["totalTime"] ,:totalLlamadas=>@result["totalCalls"] })%>
			<%else%>
				Actualmente Canal Cliente está fuera de servicio
			<%end%>
		</div
		<p>Todos tus contactos. <span class='allContacts'></span></p>
		<div id="allContacts">
			<%=render(:partial => "contact", :collection => @contacts)%>
		</div>
	</div>
</div>
<div class='vsep'>2</div>
<div class="column">
	<h2>Haz tu llamada o envía SMS/MMS.</h2>
	 <p>Destinatarios. <span class="small">Pulsa sobre tus contactos.</span> </p>

	<div class='step'>
		<div id="destinos" class="contacts"></div>
		
			<% form_remote_tag (:url => { :action => :sendsms }, :html => {:id => 'envio' ,:multipart => true}) do%>
				<%=hidden_field_tag :mtSms%>
				<%=hidden_field_tag :mms%>
				<p>Mensaje. <span class="small"><strong>160</strong> caracteres disponibles.</span> </p>
				<%=text_area(:text, nil, :size => "50x6")%><br/>
				<label>Adjunto:</label>
				<%=file_field 'upload', 'datafile' %>
				<div id="links">
					<a href="#" onclick="sendSMS(); return false;">
						<%=image_tag("sms.jpg",:id=>"smsImg",:class=>"imgOff")%>
					</a>
					<a href="#" onclick="sendMMS();">
						<%=image_tag("mms.jpg",:id=>"mmsImg",:class=>"imgOff")%>
					</a>
					<a href="#" onclick="call();">
						<%=image_tag("call.jpg",:id=>"callImg",:class=>"imgOff")%>
					</a>
				</div>
				<div id="result">
					
				</div>
			<%end%>
			<% form_remote_tag (:url => { :action => :call }, :html => {:id => 'call' }) do%>
				<%=hidden_field_tag :mt%>
				<%=hidden_field_tag :mo%>
			<%end%>
		
		</div>
	</div>
<script language="javascript">
	var mo = '<%=@result["number"] unless @result.nil?%>';
	var mo = '<%=@mo if @result.nil?%>';
	

	var destinos=new Array();
	$("callImg").hide();
	$("smsImg").hide();
	$("mmsImg").hide();
	function addContact(mt, name)
	{
		if(destinos.indexOf(mt) != -1)
		{
			return;
		}
		$("destinos").update($("destinos").innerHTML+"<div class='numero' id='"+mt+"' onClick='javascript:del(\""+mt+"\")'>"+name+"</div>");
		destinos.push(mt);
		checkCount();
	}
	
	function sendSMS()
	{
		$('result').update("Sending message...");
		$('mtSms').value = destinos.join(';');
		$('mms').value=0;
		$('envio').onsubmit();
	}
	
	function sendMMS()
	{
		$('result').update("Sending message...");
		$('mtSms').value = destinos.join(';');
		$('mms').value=1;
		$('envio').onsubmit();
	}
	function call()
	{
		$('mt').value = destinos[0];
		$('mo').value = mo;
		$('call').onsubmit();
	}
	function del(mt)
	{
		$(mt).remove();
		destinos=destinos.without(mt);	
		checkCount();
	}
	function checkCount()
	{
		if(destinos.length>=1)
		{
			if (destinos.length == 1) 
			{
				$("callImg").appear();
	
			}else{
				$("callImg").fade();
			}
				$("mmsImg").appear();
				$("smsImg").appear();
			
		}else{
			$("callImg").fade();
			$("smsImg").fade();
			$("mmsImg").fade();
		}
		
		
	}
</script>















